<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:43:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 11:40:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
-->
<template>
  <div class="user_Overview">
    <div class="user_Overview-box flex-direction align-center">
      <!-- <div class="flex">
        <p>服务人数：</p>
        <p>7323人</p>
      </div> -->
      <div class="flex align-center" style="margin-bottom: 20px">
        <dv-decoration-1 style="width: 120px; height: 30px" />
        <span class="totel">服务人数：<span class="num">891</span>人 </span>
      </div>
      <div
        class="item_title_content flex justify-around flex-wrap"
        style="width: 100%"
      >
        <div class="box-item">
          <!-- <img src="../../assets/img/logo/money.png" alt="" /> -->
          <div class="flex flex-direction align-center">
            <p class="num">448人</p>
            <p class="text">男</p>
          </div>
        </div>
        <div class="box-item">
          <!-- <img src="../../assets/img/logo/nurse.png" alt="" /> -->
          <div class="flex flex-direction align-center">
            <p class="num">443人</p>
            <p class="text">女</p>
          </div>
        </div>
        <div class="box-item">
          <!-- <img src="../../assets/img/logo/nurse.png" alt="" /> -->
          <div class="flex flex-direction align-center">
            <p class="num">27人</p>
            <p class="text">独居</p>
          </div>
        </div>
        <div class="box-item">
          <!-- <img src="../../assets/img/logo/nurse.png" alt="" /> -->
          <div class="flex flex-direction align-center">
            <p class="num">40人</p>
            <p class="text">特困老人</p>
          </div>
        </div>
      </div>
    </div>

    <div style="width: 100%; height: 220px">
      <Echart
        id="leftCenter"
        :options="options"
        class="left_center_inner"
        ref="charts"
      />
    </div>
    <div class="bottom-box flex">
      <div class="box-item">
        <img src="../../assets/img/logo/shebei.png" alt="" />
        <div class="flex flex-direction">
          <p class="num">205</p>
          <p class="text">呼叫设备</p>
        </div>
      </div>
      <div class="box-item">
        <img src="../../assets/img/logo/jiance.png" alt="" />
        <div class="flex flex-direction">
          <p class="num">205</p>
          <p class="text">健康检测</p>
        </div>
      </div>

      <!-- <div>智能设备数量：</div>
      <div>呼叫设备：882人</div>
      <div>健康检测：882人</div> -->
    </div>
    <div style="display: flex; justify-content: flex-end">
      <el-radio-group v-model="radio1" size="mini">
        <el-radio label="本年"></el-radio>
        <el-radio label="本月"></el-radio>
        <el-radio label="本日"></el-radio>
      </el-radio-group>
    </div>
    <div style="width: 100%; height: 170px">
      <Echart
        id="leftCenterBottom"
        :options="optionLine"
        class="left_center_inner"
        ref="chartsLine"
      />
    </div>
  </div>
</template>

<script>
import { currentGET } from "api";
import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
import Kong from "../../components/kong.vue";
export default {
  components: { vueSeamlessScroll, Kong },
  data() {
    return {
      radio1: "本年",
      list: [],
      pageflag: true,
      components: vueSeamlessScroll,
      defaultOption: {
        ...this.$store.state.setting.defaultOption,
        singleHeight: 240,
        limitMoveNum: 5,
        step: 0,
      },
      options: {},
      optionLine: {},
    };
  },
  computed: {
    sbtxSwiperFlag() {
      let sbtxSwiper = this.$store.state.setting.sbtxSwiper;
      if (sbtxSwiper) {
        this.components = vueSeamlessScroll;
      } else {
        this.components = Kong;
      }
      return sbtxSwiper;
    },
  },
  created() {},

  mounted() {
    this.getData();
    this.init();
    this.initLine();
  },
  methods: {
    addressHandle(item) {
      let name = item.provinceName;
      if (item.cityName) {
        name += "/" + item.cityName;
        if (item.countyName) {
          name += "/" + item.countyName;
        }
      }
      return name;
    },
    getData() {
      this.pageflag = true;
      // this.pageflag =false
      currentGET("big3", { limitNum: 20 }).then((res) => {
        console.log("设备提醒", res);
        if (res.success) {
          this.countUserNumData = res.data;
          this.list = res.data.list;
          let timer = setTimeout(() => {
            clearTimeout(timer);
            this.defaultOption.step =
              this.$store.state.setting.defaultOption.step;
          }, this.$store.state.setting.defaultOption.waitTime);
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.msg,
            type: "warning",
          });
        }
      });
    },
    init() {
      let colors = ["#ECA444", "#33A1DB", "#56B557"];
      this.options = {
        title: {
          text: "健康评估人次",
          top: 20,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        legend: {
          show: true,
          orient: "vertical",
          right: 20,
          top: 120,
          bottom: 60,
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
          formatter: function (name) {
            let data = [
              { value: 394, name: "60-70岁" },
              { value: 354, name: "70-80岁" },
              { value: 257, name: "80-90岁" },
              { value: 55, name: "90岁以上" },
              { value: 785, name: "能力完好" },
              { value: 232, name: "轻度失能" },
              { value: 44, name: "中度失能" },
              { value: 74, name: "重度失能" },
            ];

            // let name1 = option.series[0].name;  // 第1组数据的name

            let tarValue; // 定义一个最终结果变量
            // let total1 = 0;  // 定义一个变量，接收第1组数据的和

            for (let i = 0; i < data.length; i++) {
              if (name == data[i].name) tarValue = data[i].value;
            }
            return name + " : " + tarValue + "人";
          },
        },
        // tooltip: {
        //   trigger: "item",
        //   backgroundColor: "rgba(0,0,0,.6)",
        //   borderColor: "rgba(147, 235, 248, .8)",
        //   textStyle: {
        //     color: "#FFF",
        //   },
        // },
        // legend: {
        //   show: true,
        //   bottom: "5",
        //   textStyle: {
        //     color: "#fff",
        //   },
        // },
        series: [
          {
            name: "会员年龄分布",
            type: "pie",
            selectedMode: "single",
            radius: [0, "40%"],
            center: ["20%", "60%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 394, name: "60-70岁" },
              { value: 354, name: "70-80岁" },
              { value: 257, name: "80-90岁" },
              { value: 55, name: "90岁以上" },
            ],
          },
          {
            name: "健康统计与评估",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["20%", "60%"],
            labelLine: false,
            label: {
              formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
              //   position: "outside",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  lineHeight: 26,
                },
                c: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
                per: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
              },
              // formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              // backgroundColor: "#F6F8FC",
              // borderColor: "#8C8D8E",
              // borderWidth: 1,
              // borderRadius: 4,
              // rich: {
              //   a: {
              //     color: "#6E7079",
              //     lineHeight: 22,
              //     align: "center",
              //   },
              //   hr: {
              //     borderColor: "#8C8D8E",
              //     width: "100%",
              //     borderWidth: 1,
              //     height: 0,
              //   },
              //   b: {
              //     color: "#4C5058",
              //     fontSize: 14,
              //     fontWeight: "bold",
              //     lineHeight: 33,
              //   },
              //   per: {
              //     color: "#fff",
              //     backgroundColor: "#4C5058",
              //     padding: [3, 4],
              //     borderRadius: 4,
              //   },
              // },
            },
            data: [
              { value: 785, name: "能力完好" },
              { value: 232, name: "轻度失能" },
              { value: 44, name: "中度失能" },
              { value: 74, name: "重度失能" },
            ],
          },
        ],
      };
    },
    initLine() {
      this.optionLine = {
        textStyle: {
          color: "#FFF",
        },
        grid: {
          top: 30,
          left: 30,
          bottom: 40,
          right: 10,
        },
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          name: "服务工单数",
          type: "value",
        },
        series: [
          {
            data: [203, 162, 213, 201, 178, 164, 162, 150, 95, 82, 89, 47],
            type: "line",
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.lr_titles {
  width: 100%;
  box-sizing: border-box;

  :deep(.border-box-content) {
    box-sizing: border-box;
    padding: 75px 16px 0px;
  }
}
.user_Overview {
  &-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 10px 0;
    p {
      font-size: 22px;
    }
    .totel {
      margin-left: 10px;
      font-size: 22px;
    }
    .box-item {
      display: flex;
      width: 25%;
    }

    img {
      width: 35px;
      height: 35px;
      margin-right: 10px;
    }
    .num {
      font-size: 24px;
      color: aqua;
      margin-bottom: 5px;
    }
    .text {
      font-size: 14px;
    }

    .user-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .num {
        font-size: 28px;
        color: aqua;
        margin-bottom: 5px;
      }
      .text {
        font-size: 22px;
      }
    }
  }

  .bottom-box {
    margin: 18px 0;
    .box-item {
      display: flex;
      width: 50%;
    }

    img {
      width: 48px;
      height: 48px;
      margin-right: 8px;
    }
    .num {
      font-size: 28px;
      color: aqua;
      margin-bottom: 5px;
    }
    .text {
      font-size: 18px;
    }
  }
}
</style>
